<template>
  <el-dialog
    title="添加筛选"
    class="notice-box"
    :visible.sync="visible"
    width="700px">
    <el-form :model="formData" label-position="top">
      <el-form-item label="道具名">
        <!-- <el-autocomplete
            v-model="skinName"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect"
        ></el-autocomplete> -->
        <el-select v-model="skinName" filterable :filter-method="filterTrigger" @change="skinChange" placeholder="请输入内容">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.value"
              :value="item">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="显示名称">
            <el-input v-model="typeName"></el-input>
      </el-form-item>
      <el-form-item label="图片">
       <div class="skin">
        <img v-if="pic" :src="pic" alt="">
       </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="saveNotice">提 交</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
    props: {
        show: {
            type: Boolean,
            defalut: false
        },
        propsItem: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {
            visible: this.show,
            skinName: '',
            typeName: '',
            pic: '',
            id: '',
            nodePath: '',
            formData: {},
            keyWord: '',
            gameId: '1104466820',
            options: []
        }
    },
    watch: {
        show (show) {
            this.visible = show
        },
        visible (show) {
            this.$emit('update:show', show)
        },
        propsItem: {
            handler: function (val) {
                if (!val.id) {
                    this.skinName = ''
                    this.typeName = ''
                    this.pic = ''
                    this.id = ''
                    this.nodePath = ''
                    return
                }
                this.skinName = val.skinName
                this.typeName = val.name
                this.pic = val.skinIcon
                this.id = val.id
                this.nodePath = val.nodePath
            },
            deep: true
        }
    },
    methods: {
        saveNotice () {
            if (this.typeName === '') {
                this.$message.error('筛选名称不能为空')
                return
            }

            this.$emit('confirm', {
                gameId: '1104466820',
                type: 1,
                name: this.typeName,
                typeName: this.skinName,
                pic: this.pic,
                id: this.id,
                nodePath: this.nodePath
            })
        },
        skinChange (item) {
            this.formData = item
            this.skinName = item.skinName
            this.typeName = item.value
            this.pic = item.icon
            this.nodePath = item.id
        },
        filterTrigger (keyWord) {
            let res = /^[\u4E00-\u9FA5]+$/
            if (!res.test(keyWord)) return
            if (!keyWord) return
            this.$http.post('/trade/selectSkinData', {
                keyWord: keyWord
            }).then(res => {
                if (res.code === '0') {
                    res.data.forEach(item => {
                        item.value = item.skinName
                    })
                    this.options = res.data
                }
            })
        }
        // querySearchAsync (queryString, cb) {
        //     let res = /^[\u4E00-\u9FA5]+$/
        //     if (!res.test(queryString)) return
        //     if (!queryString) return
        //     this.$http.post('/trade/selectSkinData', {
        //         keyWord: queryString
        //     }).then(res => {
        //         if (res.code === '0') {
        //             res.data.forEach(item => {
        //                 item.value = item.skinName
        //             })
        //             cb(res.data)
        //         }
        //     })
        // },
        // createStateFilter (queryString) {
        //     return (state) => {
        //         return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        //     }
        // }
    }
}
</script>
<style lang="scss" scoped>
    .skin{
        width: 120px;
        height: 120px;
        border: 1px solid #cccccc;
        img{
            width: 120px;
        }
    }
</style>
